<template>
  <el-container class="container">
    <el-form :model="form" label-width="100px" label-position="left" class="basicinfo-form">
      <el-row>
        <el-col :span="12">
          <el-form-item label="公司名称">
            <el-input v-model="form.enterpriseName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业性质">
            <el-input v-model="form.enterprisePrope"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="企业类型">
            <el-select v-model="form.enterpriseType">
              <el-option label="--请选择企业类型--" value=""></el-option>
              <el-option label="工业企业" value="工业企业"></el-option>
              <el-option label="服务业企业" value="服务业企业"></el-option>
              <el-option label="批发零售企业" value="批发零售企业"></el-option>
              <el-option label="住宿餐饮企业" value="住宿餐饮企业"></el-option>
              <el-option label="建筑业企业" value="建筑业企业"></el-option>
              <el-option label="房地产开发企业" value="房地产开发企业"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业法人">
            <el-input v-model="form.legalPerson"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="注册资本(万)">
            <el-input v-model="form.registeredCapit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业注册时间" v-model="form.registeredTime">
            <el-input></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="社会信用编码">
            <el-input v-model="form.creditCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业电话">
            <el-input v-model="form.enterprisePhone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="企业住址">
            <el-input v-model="form.enterpriseAddress"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="form-picture">
          <span style="width: 100px">营业执照</span>
          <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :auto-upload="false"
            :on-preview="handlePictureCardPreview" :file-list="filelist" :on-remove="handleRemove"
            class="form-picture-card">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-col>
      </el-row>
    </el-form>
  </el-container>
</template>
<script>
export default {
  name: "basicinfo",
  data() {
    return {
      form: {},
      dialogImageUrl: "",
      dialogVisible: false,
      filelist: [],
    };
  },
  mounted() { },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 50px;

  .basicinfo-form {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .el-row {
      padding: 5px 20px;
      display: flex;

      .el-col {
        padding: 20px 10px;
        display: flex;
        align-items: center;

        .el-form-item {
          width: 90%;
          margin-bottom: 0;

          .el-select {
            width: 100%;
          }
        }

        /deep/ .el-upload--picture-card {
          width: 100px;
          height: 100px;
        }

        /deep/ .el-upload {
          width: 100px;
          height: 100px;
          line-height: 100px;
        }

        /deep/ .el-upload-list--picture-card .el-upload-list__item {
          width: 100px;
          height: 100px;
          line-height: 100px;
        }

        /deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
          width: 100px;
          height: 100px;
          line-height: 100px;
        }

        /deep/ .avatar {
          width: 100px;
          height: 100px;
        }
      }
    }
  }
}
</style>
